<template>
  <h2>当前求和为: {{ sum }}</h2>
  <button @click="sum++">点我加1</button>
  <hr />
  <h2>当前的信息为: {{ msg }}</h2>
  <button @click="msg += '!'">点我加1</button>
  <hr>
  <h2>姓名:{{ person.name }}</h2>
  <h2>年龄:{{ person.age }}</h2>
  <h2>薪资:{{ person.job.j1.salary }}K</h2>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age++ ">修改年龄</button>
  <button @click="person.job.j1.salary++ ">涨薪</button>
</template>

<script>
import { ref, reactive, watch } from "vue"; // ref处理基本类型数据  reactive处理引用类型数据
export default {
  name: "demo",
  watch: {
    // vue2简单写法
    // sum(newVal, oldVal) {
    //   console.log("sum的值变了","newVal===", newVal,"oldVal===", oldVal);
    //   // 点击后打印 sum的值变了 newVal=== 1 oldVal=== 0
    // },

    // vue2完整写法
    // sum: {
    //   immediate: true,
    //   deep: true,
    //   handler(newVal,oldVal) {
    //     console.log("sum的值变了","newVal===", newVal,"oldVal===", oldVal);
    //     // sum的值变了 newVal=== 0 oldVal=== undefined
    //   }
    // }
  },
  setup() {
    // 数据
    let sum = ref(0);
    let msg = ref("hello");
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    // let person = ref({
    //   name: '张三',
    //   age: 18
    // })

    // vue3监视一：ref所定义的响应式数据
    // watch(sum, (newVal, oldVal) => {
    //   console.log("sum的值变了", "newVal===", newVal, "oldVal===", oldVal);
    // });

    // vue3监视二：ref所定义的多个响应式数据
    // vue3里面可以调用多次watch函数，比如我既想监视sum，又想监视msg，那么可以写两个watch.但是比较麻烦
    // watch(sum, (newVal, oldVal) => {
    //   console.log("sum的值变了", "newVal===", newVal, "oldVal===", oldVal);
    // },{immediate: true,deep:true});
    // watch(msg, (newVal, oldVal) => {
    //   console.log("msg的值变了", "newVal===", newVal, "oldVal===", oldVal);
    // },{immediate: true,deep:true});

    // 所以简单的写法是:
    // watch([sum,msg], (newVal, oldVal) => {
    //   console.log("sum或msg的值变了", "newVal===", newVal, "oldVal===", oldVal);
    // },{immediate: true});

    // vue3监视三:reactive所定义的响应式数据的全部属性(用的多)
    // 1.此处无法正确的获取oldVal(bug) 2.强制开启了深度监视(deep配置无效)
    watch(person,(newVal, oldVal)=>{
      console.log('person变化了',newVal,oldVal)
      console.log(newVal.name)
    },{deep:true}) // 此处的deep配置无效

    // vue3监视四:reactive所定义的响应式数据的某一个属性
    // watch(()=>person.age,(newVal, oldVal)=>{
    //   console.log('person的age变化了',newVal,oldVal)
    // })

    // vue3监视五:reactive所定义的响应式数据的某些属性
    // watch([()=>person.name,()=>person.age],(newVal, oldVal)=>{
    //   console.log('person的name或age变化了',newVal,oldVal)
    // })

    // vue3监视六:特殊情况
    // watch(()=>person.job,(newVal, oldVal)=>{
    //   console.log('person的job变化了',newVal,oldVal)
    // },{deep:true}) // 此处由于监视的是reactive所定义的对象中的某个属性,所有deep配置有效

    return {
      sum,
      msg,
      person
    };
  },
};
</script>


